<template>
  <h2>用户信息</h2>
  <p>姓名：{{ name }}</p>
  <p>性别：{{ sex }}</p>
  <p>薪资：{{ salary }}K</p>
  <p>
    <button @click="updateName">修改姓名</button>
    <button @click="updateSalary">修改薪资</button>
  </p>
</template>

<script>

import {reactive, toRef} from "vue";

export default {
  name: "Demo",
  setup() {
    const userInfo = reactive({
      name: '米色',
      sex: '男',
      job: {
        web: {
          salary: 10
        }
      }
    })

    const updateName = () => {
      userInfo.name += '-'
    }

    const updateSalary = () => {
      userInfo.job.web.salary += 1
    }

    return {

      // 不能直接返回属性，这样会导致数据响应式被擦除
      // name: userInfo.name,
      // sex: userInfo.sex,
      // salary: userInfo.job.web.salary,

      // 可以使用 toRef，把属性转化为响应式数据，源数据修改，数据也是响应的
      // 我们也可以使用计算属性来实现
      name: toRef(userInfo, 'name'),
      sex: toRef(userInfo, 'sex'),
      salary: toRef(userInfo.job.web, 'salary'),

      updateName,
      updateSalary,
    }
  }
}
</script>

<style scoped>

</style>